<template>
  <div class="zhanghao">
    <div>
      <el-card class="zhanghao__header">
        <div class="latest-version-box">
          <el-input v-model="queryCriteria.name" :placeholder="$t('add.add44')" :clearable="true" />
          <el-input
            v-model="queryCriteria.mailbox"
            :placeholder="$t('add.add069')"
            :clearable="true"
          />

          <el-date-picker
            range-separator="~"
            :picker-options="pickerOptions"
            :clearable="true"
            v-model="date"
            :end-placeholder="$t('orderManage.orderCreateTime2_s')"
            :start-placeholder="$t('orderManage.orderCreateTime1_s')"
            type="daterange"
            value-format="yyyy-MM-dd"
          />

          <el-select
            :clearable="true"
            filterable
            v-model="queryCriteria.countryName"
            :placeholder="$t('orderManage.country_p')"
            @change="countryChange"
          >
            <el-option
              v-for="item in countryList"
              :key="item.id"
              :label="item.cname"
              :value="item.cname"
            />
          </el-select>

          <el-select
            :clearable="true"
            filterable
            v-model="queryCriteria.cityName"
            remote
            :remote-method="remotaCity"
            :placeholder="$t('orderManage.city_p')"
            v-lazy-load-dropdown="handleScrollDropdown"
            @change="cityChange"
          >
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.cityList"
              :value="item.cnName"
            />
          </el-select>

          <div class="zhanghao__header-buttons">
            <el-button type="primary" icon="el-icon-search" @click="toSearch">
              {{ $t('orderManage.search') }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card class="zhanghao__body">
        <div class="zhanghao__body-content">
          <el-table ref="table" :data="tableData" height="540">
            <el-table-column :label="$t('personInfo.xinxi7')" align="center" prop="realName" />
            <el-table-column :label="$t('members.chengyuan8')" align="center" prop="email" />
            <el-table-column :label="$t('members.deptName')" align="center" prop="deptName" />
            <el-table-column :label="$t('add.add134')" align="center" prop="createDate" />
            <el-table-column :label="$t('orderManage.country')" align="center" prop="countryCn" />
            <el-table-column :label="$t('orderManage.city')" align="center" prop="cityCn" />
          </el-table>
        </div>
        <el-pagination
          background
          :current-page="pageable.page"
          :page-size="pageable.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="onPageSizeChange"
          @current-change="onPageChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
function setPickerShortcutStyle(innerHTML) {
  const panelShortcutDom = document.querySelectorAll('.el-picker-panel__shortcut');
  panelShortcutDom.forEach((dom) => {
    if (dom.innerHTML === innerHTML) {
      dom.setAttribute('style', 'color: #003E67');
    } else {
      dom.setAttribute('style', 'color: #606266');
    }
  });
}
export default {
  name: 'orderManagement',
  data() {
    return {
      queryCriteria: {
        name: '',
        mailbox: '',
        orderCreateTime1: '',
        orderCreateTime2: '',
        countryName: '',
        cityName: '',
        deptId: '',
      },
      date: '',
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t('add.add155'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add155'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add156'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add156'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add157'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add157'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 119);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: this.$t('add.add158'),
            onClick: (picker) => {
              setPickerShortcutStyle(this.$t('add.add158'));
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime());
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 364);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      pageable: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      // 国家list
      countryList: [],
      cityList: [],
      // 存储城市下拉列表接口请求参数
      cityParams: {
        page: 1,
        limit: 10,
        countryId: null,
        cityName: '',
      },
      cityTotal: 0,
    };
  },

  created() {
    // 获取国家城市下拉数据
    this.getCountryData();
    this.getCityData();

    this.toSearch();
  },
  mounted() {},
  directives: {
    'lazy-load-dropdown': {
      bind(el, binding) {
        const SELECT_DOM = el.querySelector('.el-select-dropdown .el-scrollbar__wrap');
        // SELECT_DOM 获取到的dmo节点 下面需要用到dmo节点的clientHeight
        SELECT_DOM.addEventListener('scroll', () => {
          if (SELECT_DOM.scrollTop + SELECT_DOM.clientHeight >= SELECT_DOM.scrollHeight) {
            binding.value();
          }
        });
      },
    },
  },
  methods: {
    getCountryData() {
      this.$http({
        method: 'get',
        url: 'country/getListCountry', //后端接口
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.countryList = res.data;
        }
      });
    },
    getCityData() {
      this.$http({
        method: 'get',
        url: 'city/page', //后端接口
        params: this.cityParams,
      }).then(({ data: res }) => {
        if (res.code === 0 && res.data) {
          this.cityTotal = res.data.total;

          this.cityList.push(...res.data.list);
        }
      });
    },
    countryChange() {
      this.cityParams.cityName = '';
      this.queryCriteria.cityName = '';
      this.cityParams.page = 1;
      let needObj = this.countryList.filter((f) => f.cname === this.queryCriteria.countryName)[0];
      if (needObj) {
        this.cityParams.countryId = needObj.id;
        this.cityList = [];
        this.getCityData();
      } else {
        this.cityParams.countryId = null;
        this.getCityData();
      }
    },
    cityChange() {
      this.cityList = [];
      this.cityParams.cityName = this.queryCriteria.cityName;
      this.getCityData();
    },

    remotaCity(val) {
      this.cityParams.cityName = val;
      this.cityParams.page = 1;
      this.cityList = [];
      this.getCityData();
    },

    // 给自定义指令用的方法
    handleScrollDropdown() {
      this.cityParams.page++;
      // 这一步是做了一个容错判断 在pageNum>total 时 return出去
      if ((this.cityParams.page - 1) * this.cityParams.limit > this.cityTotal) return;
      // 获取列表接口
      this.getCityData();
    },

    toSearch() {
      this.pageable.page = 1;
      this.search();
    },
    search() {
      if (this.date && this.date.length > 0) {
        this.queryCriteria.orderCreateTime1 = this.date[0];
        this.queryCriteria.orderCreateTime2 = this.date[1];
      } else {
        this.queryCriteria.orderCreateTime1 = '';
        this.queryCriteria.orderCreateTime2 = '';
      }
      let param = {
        limit: String(this.pageable.pageSize),
        page: String(this.pageable.page),
        userName: this.queryCriteria.name,
        email: this.queryCriteria.mailbox,
        countryName: this.queryCriteria.countryName,
        cityName: this.queryCriteria.cityName,
        startTime: this.queryCriteria.orderCreateTime1,
        endTime: this.queryCriteria.orderCreateTime2,
      };
      this.$http
        .post('/sys/user/dentalImageToCloud', param)
        .then(({ data: res }) => {
          if (res.code !== 0) {
          } else {
            console.log('res---', res);
            this.tableData = res.data.list;
            this.pageable.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    onPageChange(page) {
      this.pageable.page = page;
      this.search();
    },
    onPageSizeChange(pageSize) {
      this.pageable.pageSize = pageSize;
      this.search();
    },
  },
};
</script>

<style lang="scss" scoped>
.zhanghao {
  width: 100%;
  height: 100%;

  &__header {
    height: var(--header-height);
    width: 100%;
    // padding-top: 60px;
    position: relative;

    .latest-version-box {
      // position: absolute;
      // top: 20px;
      // left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      width: 100%;

      .el-input {
        width: 260px;
      }
    }

    ::v-deep .el-card__body {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-inputs {
      display: flex;
      align-items: center;
      gap: 20px;

      & > * {
        width: 260px;
      }

      .el-date-editor {
        width: 340px;
      }
    }
  }

  &__body {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - var(--header-height) - 20px);

    ::v-deep .el-pagination {
      margin-top: 8px;
    }
  }

  ::v-deep .el-table th.el-table__cell > .cell {
    padding-left: 14px !important;
  }
}
</style>
